<template>
  <div class="safe-containner">
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="4">
        <span><router-link  :to="{path:'/monitor'}"><img :src="returnnormalpress" class="returnnormalpress"/></router-link></span>
        <span><img :src="realtimeindex" class="equiplist"/></span>
        <span class="description">监控</span>
      </el-col>
      <el-col :xs="7" :sm="6" :md="18" :lg="18" :xl="21" class="con" >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="outMore">
          <div class="dataTitles">
            操作日志
          </div>
        </div>
        <div class="safeSearch">
          <div class="outMost">
            <el-form :inline="true" :model="operationlogBody">
              <el-form-item class="handItem" label="操作人:">
                <el-input class="handInput" v-model="operationlogBody.data.condition.user_id"></el-input>
              </el-form-item>
              <el-form-item class="handItem" label="模块:">
                <el-select class="handInput" v-model="operationlogBody.data.condition.modular" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="handItem" label="IP:">
                <el-input class="handInput" v-model="operationlogBody.data.condition.ip"></el-input>
              </el-form-item>
              <el-form-item class="handItem" label="操作类型:">
                <el-select class="handInput" v-model="operationlogBody.data.condition.opera_type" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in typeData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="handItem" label="时间段:">
                <el-date-picker
                  v-model="timeNeed"
                  type="daterange"
                  class="datePicker"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
              </el-form-item>
              <el-form-item class="handItem">
                <el-button type="primary" @click="getOperationlogList">查询</el-button>
              </el-form-item>
              <el-form-item class="handItem">
                <el-button class="clear" type="primary" @click="returnOperationlog">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="safeTableList">
          <div class="pagination-container footerPage">
            <el-pagination
              @size-change="safeSizeChange"
              @current-change="safeCurrentChange"
              :current-page="ListQuery.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="ListQuery.limit"
              background layout="total, sizes, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
          <el-table
            :data="operationlogList"
            border
            stripe border fit highlight-current-row
            height="725"
            :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'8px 0px'}">
            <el-table-column
              prop="index"
              align="center"
              label="序号"
              width="60px"
            >
            </el-table-column>
            <el-table-column
              prop="user_id"
              label="操作人"
              sortable
              :show-overflow-tooltip="true"
              width="200px">
            </el-table-column>
            <el-table-column
              prop="ip"
              label="IP"
              sortable
              :show-overflow-tooltip="true"
              width="200px">
            </el-table-column>
            <el-table-column
              prop="modular"
              label="模块"
              sortable
              :show-overflow-tooltip="true"
              width="200px">
            </el-table-column>
            <el-table-column
              prop="opera_type"
              label="操作类型"
              sortable
              :show-overflow-tooltip="true"
              width="200px">
            </el-table-column>
            <el-table-column
              prop="content"
              label="内容"
              :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              prop="logs_time"
              label="操作时间"
              sortable
              :show-overflow-tooltip="true"
              width="200px">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import axios from 'axios'
  import realtimeindex from '@/assets/home/realtimeindex.png'
  import returnnormalpress from '@/assets/equipv2/returnnormalpress.png'
  export default {
    name: 'safeTime',
    components: {},
    data() {
      return {
        realtimeindex,
        returnnormalpress,
        timeNeed: '',
        testNumber: this.routerNeed,
        options: [],
        typeData: [],
        count: 1,
        cols: [
          { prop: 'user_id', label: '操作人', width: '200px' },
          { prop: 'ip', label: 'IP', width: '200px' },
          { prop: 'modular', label: '模块', width: '200px' },
          { prop: 'opera_type', label: '操作类型', width: '200px' },
          { prop: 'content', label: '内容' },
          { prop: 'logs_time', label: '操作时间', width: '200px' }
        ],
        total: 0,
        ListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        operationlogList: [],
        //  配件更换记录
        operationlogBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'log_condition',
          data: {
            condition: {
              opera_type: '',
              begin_time: '',
              end_time: '',
              ip: '',
              content: '',
              modular: '',
              remarks: '',
              pid: '',
              user_name: '',
              user_id: ''
            },
            page: {
              page_size: '20',
              page_number: '1'
            }
          }
        },
        getModularData: {
          access_token: localStorage.getItem('access_token'),
          type: 'get_modular'
        },
        getTypeData: {
          access_token: localStorage.getItem('access_token'),
          type: 'operator_type_get'
        }
      }
    },
    mounted() {
      this.getModularWork()
      this.getTypeWork()
      this.getOperationlogList()
    },
    methods: {
      toJSON() {
      },
      getModularWork() {
        axios.post('/log', this.getModularData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.options = res.data.datas
        })
          .catch((error) => {
            console.log(error)
          })
      },
      getTypeWork() {
        axios.post('/log', this.getTypeData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.typeData = res.data.datas
        })
          .catch((error) => {
            console.log(error)
          })
      },
      returnOperationlog() {
        this.operationlogBody.data.condition.user_id = ''
        this.operationlogBody.data.condition.ip = ''
        this.operationlogBody.data.condition.modular = ''
        this.operationlogBody.data.condition.opera_type = ''
        this.timeNeed = []
        this.getOperationlogList()
      },
      // 配件更换记录
      getOperationlogList() {
        if (this.timeNeed) {
          this.operationlogBody.data.condition.begin_time = this.timeNeed[0]
          this.operationlogBody.data.condition.end_time = this.timeNeed[1]
        } else {
          this.operationlogBody.data.condition.begin_time = ''
          this.operationlogBody.data.condition.end_time = ''
        }
        axios.post('/log', this.operationlogBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.operationlogList = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
          for (let a = 0; a < res.data.data.items.length; a++) {
            this.operationlogList[a].index = (a + 1) + (res.data.data.page.page_number - 1) * res.data.data.page.page_size
          }
          // for (let b = 0; b < this.operationlogList.length; b++) {
          //   if (this.operationlogList[b].status === 0) {
          //     this.operationlogList[b].status = '未完成'
          //   } else {
          //     this.operationlogList[b].status = '已完成'
          //   }
          // }
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
          })
      },
      // 当前页
      safeCurrentChange(val) {
        this.operationlogBody.data.page.page_number = (val) + ''
        this.getOperationlogList()
      },
      // 每页显示多少条
      safeSizeChange(pageSize) {
        //  this.operationlogBody.data.page.page_number = '1'
        this.operationlogBody.data.page.page_size = (pageSize) + ''
        this.getOperationlogList()
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .safe-containner{
    width: 100%;
    padding: 20px;
    .seachnav{
      width: 60%;
      height: 50px;
      position: fixed;
      z-index: 2;
      top:0;
      bottom: 0;
      line-height: 55px;
      padding-left: 0px;
      .description{
        font-size: 18px;
        color: #333;
        line-height: 10px;
        padding-left: 10px;
      }
      .returnnormalpress{
        vertical-align: middle;
      }
      .equiplist{
        vertical-align: middle;
        margin-left: 10px;
      }
      .searchinvalid{
        vertical-align: middle;
      }
      .con{
        width: 85%;
        height: 50px;
        float: right;
        margin-right: 20px;
        line-height: 3px;
        padding-left: 0 !important;
        .seachContent{
          font-size:18px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          padding-top: 0px;
          color:rgba(51,51,51,1);
        }
        .seachtitle{
          font-size:12px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(102,102,102,1);
        }
      }
    }
    .outMore{
      height: 40px;
      padding-top: 2px;
      border: none;
    }
    .dataTitles {
      border: none;
      height: 16px;
      font-size: 16px;
      color: #323842;
    }
    .safeSearch{
      width: 100%;
      height: 50px;
    }
    /deep/ .gutter {
      background: rgb(216, 222, 232);
    }
    .safeTableList{
      width: 100%;
      height: 500px;
      background-color: white;
    }
    .footerPage{
      float: right;
      right:20px;
      position: relative;
      margin: 5px 0px;
    }
    .segmentingLine {
      font-size: 20px;
    }
    .gutter {
      background: rgb(216, 222, 232);
    }
    /deep/ .delete {
      display: inline;
      margin-left: 10px;
    }
    /deep/ .el-icon-delete{
      padding: 0;
      font-weight: 700;
      font-size: 20px;
      color: #d97159;
    }
    /deep/ .el-icon-delete:hover{
      color: #d97159;
    }
    /deep/ .el-icon-delete:focus{
      color: #d97159;
    }
    /deep/ .el-textarea__inner {
      resize: none;
    }
    /deep/ .el-table::before {
      height: 0px;
    }
    /deep/ .el-table .cell {
      white-space: pre-line;
    }
    /deep/ .relation {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #338ef5;
    }
    /deep/ .el-textarea__inner {
      border: none;
    }
    /deep/ .el-form-item {
      margin-bottom: 10px;
    }
    /deep/ img {
      vertical-align: middle;
      margin-bottom: 3px;
    }
    /deep/ [class*=" el-icon-"], [class^=el-icon-] {
      font-weight: 700;
    }
    /deep/ .el-tree {
      background: #EAEDF1;
      padding: 10px;
    }
    /deep/ .el-dialog {
      width: 800px;
    }
    /deep/ .safeTimeTree {
      overflow: auto;
      height: 447px;
    }
    /deep/ .notes {
      float: left;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #69727E;
    }
    /deep/ .bottonConfirm {
      padding: 6px 16px;
      float: right;
      border:1px solid #338ef5;
      background: #338ef5;
    }
    /deep/ .leftInput > .el-input__inner {
      height: 30px;
      margin:10px 20px;
      width: 220px;
    }
    /deep/ .addSafeTable {
      height: 495px;
      overflow-y: auto;
    }
    /deep/ .addSafeTable > .el-table__header-wrapper{
      height: 0px;
    }
    /deep/ .addSafeTable > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > .el-table td, .el-table th{
      padding: 5px 0px;
    }
    /deep/ .el-icon-minus {
      color: #D05133;
    }
    /deep/ .el-message-box__message p {
      text-indent: 160px!important;
    }
    /deep/ .el-message-box{
      width: 540px;
    }
    /deep/ .el-message-box__header{
      background-color: #E3E6EE;
      padding: 10px 15px;
    }
    /deep/ .el-message-box__title{
      font-size: 18px;
      font-weight: Bold;
      color: #323842;
    }
    /deep/ .el-message-box__status{
      right: 247px;
      top: 65px;
      font-size: 48px !important;
    }
    /deep/ .el-message-box__status.el-icon-warning{
      color: #E53D41;
    }
    /deep/ .el-message-box__content{
      height: 182px;
    }
    /deep/ .el-message-box__status + .el-message-box__message {
      padding-left: 20px;
      padding-right: 12px;
    }
    /deep/ .el-message-box__message p {
      margin: 0;
      font-size: 18px;
      color: #323842;
      padding-top: 96px;
      text-align: center;
    }
    /deep/ .el-message-box__headerbtn{
      top: 9px;
      font-size: 18px;
    }
    /deep/ .el-message-box__btns{
      padding: 10px 15px 7px ;
      border-top: 1px solid #e8eaf1;
    }
    /deep/ .el-icon-delete{
      padding: 0;
      font-size: 20px;
      color: #d97159;
    }
    /deep/ .el-icon-delete:hover{
      color: #d97159;
    }
    /deep/ .el-icon-delete:focus{
      color: #d97159;
    }
    /deep/ .el-message-box{
      width: 540px;
    }
    /deep/ .el-message-box__header{
      background-color: #E3E6EE;
      padding: 10px 15px;
    }
    /deep/ .el-message-box__title{
      font-size: 18px;
      font-weight: Bold;
      color: #323842;
    }
    /deep/ .el-message-box__status{
      right: 247px;
      top: 65px;
      font-size: 48px !important;
    }
    /deep/ .el-message-box__status.el-icon-warning{
      color: #E53D41;
    }
    /deep/ .el-message-box__content{
      height: 182px;
    }
    /deep/ .el-message-box__status + .el-message-box__message {
      padding-left: 20px;
      padding-right: 12px;
    }
    /deep/ .el-message-box__message p {
      margin: 0;
      font-size: 18px;
      color: #323842;
      padding-top: 96px;
      text-align: center;
    }
    /deep/ .el-message-box__headerbtn{
      top: 9px;
      font-size: 18px;
    }
    /deep/ .el-message-box__btns{
      padding: 10px 15px 7px ;
      border-top: 1px solid #e8eaf1;
    }
    /deep/ .outMost{
      width: 100%;
      height: 50px;
      background-color: #ffffff;
      padding-top: 5px;
      padding-left: 20px;
      border-bottom: 1px solid #e0e0e0;
    }
    /deep/ label {
      font-weight: normal;
      color: #69727E;
    }
    /deep/ .handItem {
      margin-bottom: 5px!important;
    }
    /deep/ .indieWidth {
      padding: 6px 8px;
    }
    /deep/ .el-button + .el-button {
      margin-left: 5px;
    }
    /deep/ .el-button--primary {
      height: 30px;
      font-size: 14px;
      padding: 6px 16px;
      background: #338ef5;
      border-color: #338ef5;
    }
    /deep/ .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    /deep/ .dateInput {
      width: 385px;
    }
    /deep/ .handInput {
      width: 150px;
    }
    /deep/ .clear{
      padding: 6px 16px;
      background-color: #758aa1;
      border-color: #758aa1 ;
      color: #fff;
    }
    /deep/ .el-dropdown-link {
      border: 2px solid;
      border-right: 0px;
      border-right: 4px solid;
      font-size: 10px;
      padding:2px;
      color: #338ef5;
    }
    /deep/ .el-date-editor .el-range__icon {
      line-height: 25px;
    }
    /deep/ .el-date-editor .el-range-separator {
      line-height: 25px;
    }
    /deep/ .datePicker {
      width: 400px;
    }
    /deep/ .el-date-editor .el-range__close-icon {
      line-height: 25px;
    }
    /deep/ .gutter {
      background-color: #F7F8F9;
    }
  }
</style>
